<!---
* <pre>
 * @文件名称：  Login.vue
 * @包路径：
 * @版权所有： 北京数字医信科技有限公司 (C) 2020
 *
 * @类描述:
 * @版本:       V3.2.0
 * @作者        daizhenhong
 * @创建时间    2020/3/13 11:42 上午
 *
 * @修改记录：
  -----------------------------------------------------------------------------------------------
   ----------- 时间      |   修改人    |     修改的方法       |         修改描述   ---------------
  -----------------------------------------------------------------------------------------------
 </pre>
-->
<template>
  <div class="contain">
    <el-form
      ref="accountForm"
      :model="account"
      :rules="rules"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm loginContain">
      <h3 class="title" style="text-align: center; margin-bottom: 20px;">小树苗</h3>
      <el-form-item prop="username">
        <el-input type="text"
                  v-model="account.username"
                  maxLength="20"
                  auto-complete="off"
                  placeholder="账号">

          <i slot="prefix" class="el-input__icon el-icon-user"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input @keyup.enter.native="onClick"
                  type="password"
                  v-model="account.pwd"
                  auto-complete="off"
                  maxLength="20"
                  placeholder="密码">
          <i slot="prefix" class="el-input__icon el-icon-aim"/>
        </el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="onClick" :loading="loading">登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      account: {
        username: '',
        pwd: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        pwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ]
      },
      checked: true
    }
  },
  methods: {
    onClick() {
      this.$refs.accountForm.validate((result) => {
        if (result) {
          if (this.account.username == 'zsm' && this.account.pwd == 'zsm') {
            this.$message.success('登录成功!');
            localStorage.setItem('taken', 'tokenId123456')
            this.$router.push({path: '/addSecDepart'})
          } else {
            this.$message.error('用户名或密码错误!');
          }
        }
      })
    },
  }
}
</script>

<style scoped>

  .contain {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/image/login-bg.jpg);
    background-size: 100%;
  }

  .loginContain {
    width: 20rem;
    background-color: #FFFFFF;
    padding: 2rem 3rem;
    /*margin-right: 10rem;*/
    margin: 0 auto;
    border-radius: .5rem;
  }

</style>
